"use client";
import { memo, ReactElement } from "react";
import type { FC } from "react";

import styles from "./index.module.scss";
import classNames from "classnames";
import Link from "next/link";
import Search from "../Search";
import { useSelector } from "react-redux";
import { IAppRootState } from "@/store/index";
// import { useSelector } from "react-redux";
export interface IProps {
  children?: ReactElement;
}

const NavBar: FC<IProps> = memo(function (props) {
  const { children } = props;
  const { count, sugList } = useSelector(
    (rootState: IAppRootState) => rootState.home
  );

  return (
    <>
      <div className={classNames(styles.container, "wrapper")}>
        <div className={styles["nav-left"]}>
          <div className={styles["logo"]}>
            <Link href="/"></Link>
          </div>
          <h1 className={styles.text}>云音乐-购有趣</h1>
        </div>
        <div className={styles["nav-right"]}>
          <Search suggestList={sugList}></Search>
          <div className={styles["cart"]}>
            <span className={styles["tip"]}>{count}</span>
          </div>
          <div className={styles.login}>
            <span className={styles.text}>登陆</span>
            <span className={styles.arrow}></span>
          </div>
        </div>

        {children}
      </div>
    </>
  );
});

export default NavBar;
NavBar.displayName = "NavBar";
